<template>
  <view class="workdetail_body">
    <view>
      <u-row style="margin: 10px 20px 10px 20px;">
        <u-col span="6">
          <u--text style="margin-top: 10px;"
                   :text="this.workDetailList.worksUserName"
                   size="18px"
                   :bold="true"
                   align="left" />
        </u-col>
        <u-col span="6">
          <u--text style="margin-top: 10px;"
                   :text="this.workDetailList.createTime"
                   size="15px"
                   align="right" />
        </u-col>
      </u-row>
    </view>
    <view style="margin-left: 10px; margin-right: 10px;">
      <u--image class="image"
                :src="item.photoUrl"
                mode=""
                v-for="item in photoList"
                :key="item.photoKey"
                @click="imgListPreview(item.photoUrl)"
                :showLoading="true"
                width="100%"
                height="200px"
                radius="10px"
                style="margin-top: 8px;"
                :fade="true"
                duration="450"
                mode="aspectFill" />
    </view>
    <view style="margin: 10px 10px 10px 20px ">
      <u--text :text="this.workDetailList.worksCopywriting"
               size="18px"
               color="#3b3c3f" />
    </view>
    <view>
      <u-row style="margin-left: 10px;">
        <u-col span="3">
          <view>
            <u-icon name="bookmark-fill"
                    size="25"
                    :label="this.workDetailList.worksVote + '票'" />
          </view>
        </u-col>
        <u-col span="5">
          <view>
            <u-icon name="home-fill"
                    size="25"
                    label="回到首页"
                    @click="clickToHome()" />
          </view>
        </u-col>
        <u-col span="3">
          <u-button type="primary"
                    size="small"
                    text="投票"
                    color="#d01d24"
                    @click="clickAddVote()" />
        </u-col>
      </u-row>
    </view>
    </u-empty>
  </view>
</template>

<script>
import {
  getWorks
} from '@/api/system/works.js'
import {
  listPhoto
} from '@/api/system/photo.js'
import {
  addVote,
  wxconfig
} from '@/api/system/votes.js'
import {
  getUserProfile
} from "@/api/system/user"

const jWeixin = require("jweixin-module")
export default {
  data () {
    return {
      photoList: [],
      content: null,
      worksKey: null,
      // 查询参数
      queryParams: {},
      // 表单参数
      form: {},
      workDetailList: [],
    }
  },
  onLoad: function (key) {

    this.worksKey = key.key
    this.getUser()

  },
  onReady: function () {
    window.localStorage.setItem("url", location.href.split('#')[0])
    wxconfig(encodeURIComponent(location.href.split('#')[0])).then(respon => {
      if (respon) {
      //  alert("当前签名:" + respon.data.signature)
        jWeixin.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: 'wx032eaa086bf37cec', // 必填，公众号的唯一标识
          timestamp: respon.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: respon.data.nonceStr, // 必填，生成签名的随机串
          signature: respon.data.signature, // 必填，签名
          jsApiList: [
            'updateAppMessageShareData', 'onMenuShareAppMessage',
            'onMenuShareTimeline', "checkJsApi",
            "updateTimelineShareData"
          ] // 必填，需要使用的JS接口列表
        })
      }
    })
    jWeixin.checkJsApi({
      jsApiList: ['updateAppMessageShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
      success: function (res) {
        //alert("检测成功")
      }
    }),
      jWeixin.ready(function () { //需在用户可能点击分享按钮前就先调用
      //  alert("注册分享:" + window.localStorage.getItem("url"))
        jWeixin.updateAppMessageShareData({
          title: '红花郎红红火火闹元宵', // 分享标题
          desc: '快来为我投票吧！', // 分享描述
          imgUrl: 'http://footorhead.cn/xxx/share.jpg', // 分享图标
          link: window.localStorage.getItem("url"), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          success: function () {
            // 设置成功
            console.log("分享成功！！")
          }
        })
      })
    jWeixin.error(function (res) {
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      console.log("失败")
    })
  },
  methods: {
    getlist () {
      getWorks(this.worksKey).then(response => {
        this.workDetailList = response.data
      }),
        this.queryParams.worksKey = this.worksKey
      listPhoto(this.queryParams).then(response => {
        this.photoList = response.rows
      })
    },
    imgListPreview (value) {
      var urlList = []
      urlList.push(value)
      uni.previewImage({
        indicator: "number",
        loop: true,
        urls: urlList
      })
    },
    clickAddVote () {
      uni.showModal({
        title: '提示',
        content: '确定要为该作品投票吗？',
        success: function (res) {
          if (res.confirm) {
            this.form.worksKey = this.worksKey
            addVote(this.form).then(respon => {
              if (respon) {
                uni.showToast({
                  title: '投票成功！',
                  icon: 'success',
                  duration: 1000
                })
                this.getlist()
              }
            })
          } else if (res.cancel) {
            uni.showToast({
              title: '取消投票',
              icon: 'error',
              duration: 1000
            })
          }
        }.bind(this)
      })
    },
    clickToHome () {
      window.location.href = '/pages/index'
    },
    getQueryString (name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
      var r = window.location.search.substr(1).match(reg)
      if (r != null) return r[2]
      return null
    },
    getUser () {
      getUserProfile().then(response => {
        if (response == '401') {

          let key = this.getQueryString("key")
          if (key) {
            window.location.href = '/pages/login?key=' + key
          } else {
            window.location.href = '/pages/login'
          }

        }
        this.getlist()
      })
    }
  }
}
</script>

<style lang="scss">
.image {
  max-width: 700rpx;
}
</style>
